<script type="text/javascript">
$(document).ready(function () {
    var dataSource = {
            datatype: "json",
            cache: false,
            datafields: [
                { name: 'ma_buoi_dien', type: 'int' },
                { name: 'ten_buoi_dien', type: 'string' },
                { name: 'dia_diem', type: 'string' },
                { name: 'chi_tiet_them', type: 'string' },
                { name: 'thoi_gian_bat_dau', type: 'string' },
                { name: 'thoi_gian_dien', type: 'string' },
                { name: 'ngay_dien', type: 'string' },
                { name: 've_da_ban', type: 'int' }
            ],
            id: 'ma_buoi_dien',
            url: 'libs/DSShow.php',
            addrow: function (rowid, rowdata, position, commit) {
                // synchronize with the server - send insert command
                var data = "action=insert&" + $.param(rowdata);
                $.ajax({
                    //dataType: 'json',
                    url: 'controllers/Show_Controller.php',
                    data: data,
                    type: "POST",
                    cache: false,
                    success: function (data, status, xhr) {
                        // insert command is executed.
                        commit(true);
                        $('#buoibieudien_danhsach').jqxGrid('updatebounddata');
                        //dat gia tri cho the input id=nghesi_id, de no submit cung voi form
                        $("#ma_buoibieudien").val(data);
                        $("#buoibieudien_poster_upload_form").submit();
                        console.log("add commited");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        commit(false);
                        console.log(jqXHR.responseText);
                    }
                });
            },
            updaterow: function (rowid, rowdata, commit) {
               // synchronize with the server - send update command
               var data = "action=edit&" + $.param(rowdata);
               $.ajax({
                   //dataType: 'json',
                   url: 'controllers/Show_Controller.php',
                   cache: false,
                   data: data,
                   type: "POST",
                   success: function (data, status, xhr) {
                       // update command is executed.
                        commit(true);
                        $("#ma_buoibieudien").val(data);
                        $("#buoibieudien_poster_upload_form").submit();
                        $('#buoibieudien_danhsach').jqxGrid('updatebounddata');
                        console.log("update commited");
                   },
                   error: function (jqXHR, textStatus, errorThrown) {
                       console.log(textStatus + "  " + errorThrown + "   " + jqXHR.responseText);
                       commit(false);
                   }
               });
           },
           deleterow: function (mabuoidien, commit) {
                // synchronize with the server - send delete command
                var data = "action=delete&" + $.param({ mabuoidien: mabuoidien });
                $.ajax({
                    //dataType: 'json',
                    url: 'controllers/Show_Controller.php',
                    cache: false,
                    type: "POST",
                    data: data,
                    success: function (data, status, xhr) {
                        // delete command is executed.
                        commit(true);
                        $('#buoibieudien_danhsach').jqxGrid('updatebounddata');
                        console.log("delete commited");
                    },
                    error: function (jqXHR, textStatus, errorThrown) {
                        commit(false);
                        console.log(jqXHR.responseText);
                    }
                });
            }
        };
    var dataAdapter = new $.jqx.dataAdapter(dataSource);
    var tenbuoidien_renderer = function(row, columnfield, value){
        var data = $('#buoibieudien_danhsach').jqxGrid('getrowdata', row);
        var id = data["ma_buoi_dien"];
        var fileName= "resources/img/buoi_bieu_dien/" + id + ".png";
        var res = '<img src="' + fileName + '" width="40px" height="40px" style="vertical-align: middle;" onerror="changeSrc(this);"/>  ' + 
                '<strong>' + value + '</strong>';      
        return res;
    };
    $("#buoibieudien_danhsach").jqxGrid({
            theme: theme,
            width: 350,
            height: 575,
	    source: dataAdapter,
	    sortable: true,
            pageable: true,
            rowsheight: 40,
	    columns: [
	    	{ text: 'Mã', datafield: 'ma_buoi_dien', width: 50, hidden: false },
	    	{ text: 'Tên buổi diễn', datafield: 'ten_buoi_dien', width: 150, hidden: false, cellsrenderer: tenbuoidien_renderer},
                { text: 'Địa điểm', datafield: 'dia_diem', width: 150, hidden: false},
	    	{ text: 'Chi tiết', datafield: 'chi_tiet_them', hidden: true },
	    	{ text: 'Thời gian bắt đầu', datafield: 'thoi_gian_bat_dau', width: 100, hidden: true },
	    	{ text: 'Thời gian diễn', datafield: 'thoi_gian_dien', width: 100, hidden: true },
                { text: 'Ngày diễn', datafield: 'ngay_dien', width: 100, hidden: true },
	    	{ text: 'Vẽ đã bán', datafield: 've_da_ban', width: 100, hidden: true }
		]
	});
	$('#buoibieudien_danhsach').on('rowclick', function (event){
            var args = event.args;
	    var row = args.rowindex;
	    console.log("click at" + row);
	    var data = $('#buoibieudien_danhsach').jqxGrid('getrowdata', row);
            
            $("#tenbuoibieudien").val(data["ten_buoi_dien"]);
            $("#diadiemdien").val(data["dia_diem"]);
            $("#chitietthem").val(data["chi_tiet_them"]);
            $("#giodien").val(data["thoi_gian_bat_dau"]);
            $("#thoigiandien").val(data["thoi_gian_dien"]);
            $("#vedaban").text("Số lượng vé đã bán: " + data["ve_da_ban"]);
            //lay ngay sinh theo dung dinh dang
            //yyyy/mm/dd
            var ngaydien = data["ngay_dien"].toString();
            var ngay = ngaydien.substr(8, 2);
            var thang = ngaydien.substr(5, 2);
            var nam = ngaydien.substr(0, 4);
            //lay ra xong roi gan vao #ngaysinh
            $("#ngaydien").jqxDateTimeInput({ value: new Date(nam, parseInt(thang) - 1, ngay) });
            //phai tru 1 vi thang bat dau bang 0
            $('#buoibieudien_poster').attr('src', "resources/img/buoi_bieu_dien/" + data["ma_buoi_dien"] + ".png");
            $("#ma_buoibieudien").val(data["ma_buoi_dien"]);
            console.log($("#ma_buoibieudien").val());
	});
});
</script>
<div id="buoibieudien_danhsach" style="float: left"></div>